<template>
    <view class="container">
        <!-- Tab Navigation -->
        <view class="tab-nav">
            <view 
                v-for="(tab, index) in tabs" 
                :key="index"
                class="tab-item"
                :class="{ active: currentTab === index }"
                @click="switchTab(index)"
            >
                {{ tab }}
            </view>
            <view class="tab-line" :style="tabLineStyle"></view>
        </view>

        <!-- Order List -->
        <scroll-view scroll-y class="order-list">
            <view v-for="order in orders" :key="order.id" class="order-item">
                <view class="order-header">
                    <text class="store-name">{{ order.storeName }}</text>
                    <text class="order-status">{{ order.status }}</text>
                </view>
                
                <view class="order-content">
                    <view class="product-list">
                        <view v-for="(item, index) in order.items" :key="index" class="product-item">
                            <image 
                                :src="`/static/${item.imgUrl}`"
                                mode="aspectFill"
                                class="product-image"
                            ></image>
                            <view class="product-details">
                                <text class="product-name">{{ item.name }}</text>
                                <text class="product-quantity">× {{ item.quantity }}</text>
                            </view>
                            <text class="product-price">¥ {{ formatPrice(item.price * item.quantity) }}</text>
                        </view>
                    </view>
                    
                    <view class="order-info">
                        <view class="user-info">
                            <text class="info-item">收货人：{{ order.name }}</text>
                            <text class="info-item">手机号：{{ order.phone }}</text>
                            <text v-if="order.remark" class="info-item">备注：{{ order.remark }}</text>
                        </view>
                        <view class="price-section">
                            <text class="price">¥ {{ formatPrice(order.totalPrice) }}</text>
                            <text class="quantity">共 {{ getTotalQuantity(order) }} 件</text>
                        </view>
                    </view>
                </view>

                <view class="order-footer">
                    <button 
                        v-if="order.status === '配送中'"
                        class="action-button confirm"
                        @click="confirmReceipt(order)"
                    >
                        确认收货
                    </button>
                    <button 
                        v-if="order.status === '已完成' || order.status === '已取消'"
                        class="action-button"
                        @click="deleteOrder(order)"
                    >
                        删除订单
                    </button>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            tabs: ['全部'],
            currentTab: 0,
            orders: []
        }
    },
    computed: {
        tabLineStyle() {
            return {
                transform: `translateX(${this.currentTab * 100}%)`,
                width: `${100 / this.tabs.length}%`
            }
        }
    },
    onShow() {
        this.loadOrders();
    },
    methods: {
        switchTab(index) {
            this.currentTab = index;
        },
        getTotalQuantity(order) {
            return order.items.reduce((total, item) => total + item.quantity, 0);
        },
        formatPrice(price) {
            return Number(price).toFixed(2);
        },
        loadOrders() {
            const currentPhone = uni.getStorageSync('currentPhone');
            
            uni.request({
                url: 'http://localhost:3000/users',
                method: 'GET',
                success: (res) => {
                    if (res.statusCode === 200) {
                        const currentUser = res.data.find(user => user.phone === currentPhone);
                        if (currentUser && currentUser.order) {
                            this.orders = currentUser.order;
                        }
                    }
                }
            });
        },
        confirmReceipt(order) {
            const currentPhone = uni.getStorageSync('currentPhone');
            
            uni.showModal({
                title: '确认收货',
                content: '确认已收到商品？',
                success: (res) => {
                    if (res.confirm) {
                        // Update order status
                        const updatedOrder = { ...order, status: '已完成' };
                        const updatedOrders = this.orders.map(o => 
                            o.id === order.id ? updatedOrder : o
                        );
                        
                        // Get current user
                        uni.request({
                            url: 'http://localhost:3000/users',
                            method: 'GET',
                            success: (res) => {
                                if (res.statusCode === 200) {
                                    const currentUser = res.data.find(user => user.phone === currentPhone);
                                    if (currentUser) {
                                        // Update user's orders
                                        const updatedUser = {
                                            ...currentUser,
                                            order: updatedOrders
                                        };
                                        
                                        // Send update request
                                        uni.request({
                                            url: `http://localhost:3000/users/${currentUser.id}`,
                                            method: 'PUT',
                                            data: updatedUser,
                                            success: (updateRes) => {
                                                if (updateRes.statusCode === 200) {
                                                    this.orders = updatedOrders;
                                                    uni.showToast({
                                                        title: '确认收货成功',
                                                        icon: 'success'
                                                    });
                                                }
                                            }
                                        });
                                    }
                                }
                            }
                        });
                    }
                }
            });
        },
        deleteOrder(order) {
            const currentPhone = uni.getStorageSync('currentPhone');
            
            uni.showModal({
                title: '删除订单',
                content: '确认要删除该订单吗？',
                success: (res) => {
                    if (res.confirm) {
                        // Remove order from list
                        const updatedOrders = this.orders.filter(o => o.id !== order.id);
                        
                        // Get current user
                        uni.request({
                            url: 'http://localhost:3000/users',
                            method: 'GET',
                            success: (res) => {
                                if (res.statusCode === 200) {
                                    const currentUser = res.data.find(user => user.phone === currentPhone);
                                    if (currentUser) {
                                        // Update user's orders
                                        const updatedUser = {
                                            ...currentUser,
                                            order: updatedOrders
                                        };
                                        
                                        // Send update request
                                        uni.request({
                                            url: `http://localhost:3000/users/${currentUser.id}`,
                                            method: 'PUT',
                                            data: updatedUser,
                                            success: (updateRes) => {
                                                if (updateRes.statusCode === 200) {
                                                    this.orders = updatedOrders;
                                                    uni.showToast({
                                                        title: '删除成功',
                                                        icon: 'success'
                                                    });
                                                }
                                            }
                                        });
                                    }
                                }
                            }
                        });
                    }
                }
            });
        }
    }
}
</script>

<style scoped>
.container {
    min-height: 100vh;
    background-color: #f8f8f8;
}

.tab-nav {
    display: flex;
    background-color: #fff;
    position: relative;
    border-bottom: 1rpx solid #eee;
}

.tab-item {
    flex: 1;
    text-align: center;
    padding: 30rpx 0;
    font-size: 28rpx;
    color: #666;
}

.tab-item.active {
    color: #0099FF;
    font-weight: 500;
}

.tab-line {
    position: absolute;
    bottom: 0;
    height: 4rpx;
    background-color: #0099FF;
    transition: transform 0.3s;
}

.order-list {
    height: calc(100vh - 94rpx);
}

.order-item {
    margin: 20rpx;
    background-color: #fff;
    border-radius: 12rpx;
    padding: 20rpx;
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #eee;
}

.store-name {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
}

.order-status {
    font-size: 26rpx;
    color: #0099FF;
}

.order-content {
    padding: 20rpx 0;
}

.product-list {
    margin-bottom: 20rpx;
}

.product-item {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f5f5f5;
}

.product-item:last-child {
    border-bottom: none;
}

.product-image {
    width: 120rpx;
    height: 120rpx;
    border-radius: 8rpx;
    margin-right: 20rpx;
}

.product-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10rpx;
}

.product-name {
    font-size: 28rpx;
    color: #333;
}

.product-quantity {
    font-size: 24rpx;
    color: #999;
}

.product-price {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
    margin-left: 20rpx;
}

.order-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 20rpx;
    padding-top: 20rpx;
    border-top: 1rpx solid #eee;
}

.user-info {
    display: flex;
    flex-direction: column;
    gap: 8rpx;
}

.info-item {
    font-size: 24rpx;
    color: #666;
}

.price-section {
    text-align: right;
}

.price {
    font-size: 32rpx;
    color: #333;
    font-weight: bold;
    margin-bottom: 10rpx;
    display: block;
}

.quantity {
    font-size: 24rpx;
    color: #999;
}

.order-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 20rpx;
    border-top: 1rpx solid #eee;
    gap: 20rpx;
}

.action-button {
    font-size: 24rpx;
    padding: 10rpx 30rpx;
    border-radius: 30rpx;
    background-color: #fff;
    border: 1rpx solid #ddd;
    color: #666;
    margin: 0;
}

.action-button.confirm {
    background-color: #0099FF;
    color: #fff;
    border: none;
}
</style>    